<html>
	<head>
		<title>AngularJS-FlowChart</title>

		<!-- 
		LiveReload support.
		http://livereload.com/
		
		<script src="http://localhost:35729/livereload.js?snipver=1"></script>-->

	</head>	
	<body 
		ng-app="app" 
		ng-controller="AppCtrl"
		mouse-capture
		ng-keydown="keyDown($event)"
		ng-keyup="keyUp($event)"
		>

		<div style="width: 100%; overflow: scroll;">
		    <div style="width: 600px; float: left;"> 
				<textarea 
                    style="width: 100%; height: 95%;"
					chart-json-edit
					view-model="chartViewModel"
                   >
				</textarea>
			</div>
		    <div style="margin-left: 600px;">
    			<button
    				ng-click="addNewNode()"
    				title="Add a new node to the chart"
    				>
    				Add Node
				</button>
    			<button
    				ng-click="addNewInputConnector()"
    				ng-disabled="chartViewModel.getSelectedNodes().length == 0"
    				title="Add a new input connector to the selected node"
    				>
    				Add Input Connector
				</button>
    			<button
    				ng-click="addNewOutputConnector()"
    				ng-disabled="chartViewModel.getSelectedNodes().length == 0"
    				title="Add a new output connector to the selected node"
    				>
    				Add Output Connector
				</button>
    			<button
    				ng-click="deleteSelected()"
    				ng-disabled="chartViewModel.getSelectedNodes().length == 0 && chartViewModel.getSelectedConnections().length == 0"
    				title="Delete selected nodes and connections"
    				>
    				Delete Selected
				</button>
                <button
    				ng-click="saveToJson()"    				
    				title="File saved successfully"
    				>
    				Save
				</button>
                <!--<button
    				ng-click="loadFromJson()"    				
    				title="File load successfully"
    				>
    				Load
				</button>
				<button
    				ng-click="exportJson()"    				
    				title="File export successfully"
    				>
    				Export
				</button>-->

				<!--
				This custom element defines the flowchart.
				-->
			    <flow-chart
		    		style="margin: 5px; width: 350%; height: 90%;background-color:#F2F2F2;"
			      	chart="chartViewModel"
			      	>
			    </flow-chart>
		    </div>
		</div>

		<link rel="stylesheet" type="text/css" href="app.css">

		<!-- Library code. -->
		<script src="lib/jquery-2.0.2.js" type="text/javascript"></script>
		<script src="lib/angular.js" type="text/javascript"></script>

		<!-- Flowchart code. -->
		<script src="debug.js" type="text/javascript"></script>
		<script src="flowchart/svg_class.js" type="text/javascript"></script>
		<script src="flowchart/mouse_capture_service.js" type="text/javascript"></script>
		<script src="flowchart/dragging_service.js" type="text/javascript"></script>
		<script src="flowchart/flowchart_viewmodel.js" type="text/javascript"></script>
		<script src="flowchart/flowchart_directive.js" type="text/javascript"></script>

		<!-- App code. -->
		<script src="app.js" type="text/javascript"></script>
	</body>
</html>